---
const CONTRIBUTORS_URL = `https://api.github.com/repos/openui/open-ui/contributors`;
const CONTRIBUTORS = [];

// Function to fetch contributors from a specific page and add them to CONTRIBUTORS array
const fetchContributors = async (page) => {
  const response = await fetch(`${CONTRIBUTORS_URL}?page=${page}`);
  const contributors = await response.json();
  CONTRIBUTORS.push(...contributors);
};

// Fetch contributors from page 1
await fetchContributors(1);

// Fetch contributors from page 2
await fetchContributors(2); // Add more fetchContributors calls for additional pages as needed

// Filter out 'dependabot' users
const CONTRIBUTORS_SAFE = CONTRIBUTORS.filter(c => !c.login.includes('dependabot'));
---

<ul>
  {CONTRIBUTORS_SAFE.map(({ login, avatar_url, html_url }) => (
    <li>
      <a href={html_url} title={login}>
        <img src={avatar_url} alt={`Github user ${login}`} width="48" height="48" loading="lazy"/>
      </a>
    </li>
  ))}
</ul>

<style>
  ul {
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
  }
  ul, li {
    margin: 0;
  }
  li {
    inline-size: 48px;
    aspect-ratio: 1;
  }
  img {
    border-radius: 50%;
    object-fit: cover;
    scale: 1.2;
    border: 2px solid #007a3d;
    background: #ffffff;
  }
</style>